<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:35:16
 * @LastEditors: wahaha 2781216298@qq.com
 * @LastEditTime: 2023-08-16 08:57:11
-->
<template>
  <div>
    <div class="searchTop">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合作商搜索：">
          <el-input v-model="formInline.user" size="medium" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="medium" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_main">
      <div class="table_button">
        <el-button icon="el-icon-circle-plus-outline" size="medium" type="warning" @click="dialogVisible=true">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
        >
          <template slot-scope="{$index}">
            <div>{{ $index+1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="合作商名称"
          width="130px"
        />
        <el-table-column
          prop="account"
          label="账号"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
        />
        <el-table-column
          prop="ratio"
          label="分成比例"
        />
        <el-table-column
          prop="contact"
          label="联系人"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column

          label="操作"
          width="240"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="handleClick(row.id)">重置密码</el-button>
            <el-button type="text" size="small" @click="viewDetails(row)">查看详情</el-button>
            <el-button type="text" size="small" @click="amendUser(row)">修改</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="onConfirm(row.id)"
            >
              <el-button slot="reference" type="text" size="small" style="color:red;margin-left:6px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
      <!-- <div class="Pagination">
        <div class="text">
          <span>共8条数据</span>
          <span>第1/2页</span>
        </div>
        <div class="btn">
          <button>上一页</button>
          <button>下一页</button>
        </div>
      </div> -->
      <!-- <Pagination /> -->
    </div>

    <el-dialog
      title="新增区域"
      :visible.sync="centerDialogVisible"
      :before-close="handleClose"
      width="40%"
      class="dialog_from"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label="合作行名称:" style="width:45%">
          <div>{{ formInline.name }}</div>
        </el-form-item>
        <el-form-item label="联系人:" style="width:45%">
          <span>{{ formInline.contact }}</span>
        </el-form-item>
        <el-form-item label="联系电话:" style="width:45%">
          <span>{{ formInline.mobile }}</span>
        </el-form-item>
        <el-form-item label="分成比例:" style="width:45%">
          <span>{{ formInline.ratio }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="centerDialog"
      width="30%"
      center
      class="dialog_span"
    >
      <span><i class="el-icon-warning" style="paddingRight:10px; color: red; fontWeight: 22px" />确定要重置合作商密码吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialog = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </span>
    </el-dialog>
    <daiLog :dialog-visible="dialogVisible" :form-inline="formInline" @clearData="clearData" @submitForm="submitForm" />
  </div>

</template>
<script>
// import Pagination from '@/components/Pagination/index.vue'
import daiLog from './components/dailogCom.vue'
import { getPartnerListApi, updatePasswordApi, addPartnerListApi, updatePartnerListApi, deletePartnerListApi } from '@/api/area'
export default {
  name: '',
  components: {
    daiLog
  },
  data() {
    return {
      passwordId: null,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      formInline: {
        name: '',
        contact: '',
        ratio: null,
        mobile: '',
        account: '',
        password: '',
        phone: '13669696969'
      },
      tableData: [],
      centerDialogVisible: false,
      centerDialog: false,
      dialogVisible: false
    }
  },
  computed: {
  },
  created() {
    this.getPartnerList()
  },
  methods: {
    // 获取合作商列表
    async getPartnerList() {
      const res = await getPartnerListApi(this.pages)
      console.log(res)
      this.tableData = res.data.currentPageRecords
    },
    handleClick(e) {
      this.passwordId = e
      this.centerDialog = true
    },
    async submitForm() {
      try {
        if (this.formInline.id) {
          await updatePartnerListApi(this.formInline)
        } else {
          await addPartnerListApi(this.formInline)
        }
        this.clearData()
        this.getPartnerList()
      } catch (error) {
        //
      }
    },
    resetForm() {
      this.$options.ruleForm()
    },
    // 查看详情
    viewDetails(e) {
      console.log(e)
      this.formInline.name = e.name
      this.formInline.contact = e.contact
      this.formInline.ratio = e.ratio
      this.formInline.mobile = e.mobile
      this.centerDialogVisible = true
    },
    handleClose() {
      this.formInline = this.$options.data().formInline
      this.centerDialogVisible = false
    },
    // 重置密码
    async updatePassword() {
      await updatePasswordApi(this.passwordId)
      this.centerDialog = false
    },
    // 清除添加表单数据
    clearData() {
      // console.log(e)
      this.formInline = this.$options.data().formInline
      this.dialogVisible = false
    },
    // 修改合作商
    amendUser(e) {
      console.log(e)
      this.formInline.id = e.id
      this.formInline.name = e.name
      this.formInline.contact = e.contact
      this.formInline.ratio = e.ratio
      this.formInline.mobile = e.mobile
      this.formInline.account = e.account
      this.formInline.password = e.password
      this.dialogVisible = true
    },
    // 删除用户
    async onConfirm(id) {
      console.log(id)
      await deletePartnerListApi(id)
      this.getPartnerList()
    }
  }
}
</script>
<style lang="scss">
  .searchTop {
    .el-form-item__label {
      font-weight: 400;
    }
  }
  .dialog_ruleForm{
    label{
      font-weight: 400;
    }
    .el-form-item__content{
      .el-button:nth-child(1){
        margin-left: 100px;
      }
    }
  }
  .dialog_from{
    .el-form-item__label{
      font-weight: 400;
    }
  }
  .dialog_span{
    .el-dialog__body{
      text-align: center;
      font-weight: 500;
      font-size: 18px;
    }
  }
</style>
<style lang='scss'  scoped>
.searchTop{
  height: 64px;
  width: 100%;
  padding: 14px 0;
  padding-left: 20px;
  margin-bottom: 20px;
  display: flex;
  background-color: #fff;

}
.table_main{
  padding: 20px;
  background-color: #fff;
  .table_button{
    padding-bottom: 20px;
  }
}

</style>
